<template>
  <div class="content">
    <div class="title">数据总览</div>
    <div class="data">
      <div class="item" v-for="item in content" :key="item.name">
        <div class="myname">
          {{ item.name }}
          <el-tooltip v-if="item.desc" class="box-item" effect="light" placement="top">
            <template #content>
              <div class="desc">{{ item.desc }}</div>
            </template>
            <el-icon style="margin-left: 4px; color: #fff; background: #969696; border-radius: 50%">
              <QuestionFilled />
            </el-icon>
          </el-tooltip>
        </div>
        <div class="num"> {{ numFormat(state[item.key]) }}</div>
      </div>
    </div>
  </div>
</template>
<script setup lang="tsx">
  import { numFormat } from '@/utils/utils'
  import { reactive, ref, watch, computed, onMounted } from 'vue'
  import router from '@/router'
  import { getTotleData } from '@/api/ecommerce/storeManage'

  const props = defineProps(['params'])
  const content = [
    { name: '浏览量', key: 'views_count', desc: '浏览量是指某一时间段内，某一商品的浏览次数' },
    { name: '访客量', key: 'visitors_num', desc: '浏览量是指某一时间段内，某一商品的浏览次数' },
    {
      name: '应付金额',
      key: 'pay_money',
      desc: '选定条件下，店铺中产生的已成功支付订单，包括优惠减免金额及优惠抵扣金额，客户应支付的金额，包含运费、税费（货到付款以确认收货计入统计，自提以后台支付成功后计入统计；统计场景包含商品订单和直接消费订单，支付后取消或产生售后不会扣减）（按支付成功时间）'
    },
    {
      name: '实付金额',
      key: 'pay_money',
      desc: '选定条件下，店铺中产生的已成功支付订单，在扣除优惠减免金额及优惠抵扣金额后，客户实际支付的金额，包含运费、税费（货到付款以确认收货计入统计，自提以后台支付成功后计入统计；统计场景包含商品订单和直接消费订单，支付后取消或产生售后不会扣减）（按支付成功时间）'
    },
    { name: '支付单数', key: 'pay_count', desc: '选定条件下，店铺中产生的已成功支付订单单数（按支付成功时间）' },
    { name: '支付人数', key: 'pay_num', desc: '选定条件下，在店铺中有过支付行为的去重人数（按支付成功时间）' },
    { name: '客单价', key: 'guest_unit_price', desc: '选定条件下，平均每个客户支付的金额（应收金额/支付人数）' },
    { name: '复购人数', key: 'repeat_pay_num', desc: '选定条件下，在店铺支付的客户中，非首次支付的去重人数（按支付成功时间）' },
    { name: '复购率', key: 'visitor_pay_con_rate', desc: '' },
    { name: '绑定客户数', key: 'bind_cust_num', desc: '选定条件下，在商城店铺浏览/支付等去重的用户中，通过openid/unionid/手机号关联的客易达客户数。' },
    { name: '新增企微客户数', key: 'add_qy_cust_num', desc: '选定条件下，已关联的客易达客户数中，能企微触达的企微客户数。' }
  ]
  const state = ref<any>({
    views_count: 0, //浏览量
    visitors_num: 0, //访客
    pay_count: 0, //支付单数
    pay_num: 0, //支付人数
    pay_money: 0, //支付金额
    guest_unit_price: 0, //客单价
    visitor_pay_con_rate: '0%', //访问支付转化率
    repeat_pay_num: 0, //复购人数
    bind_cust_num: 0, //绑定客户数
    add_qy_cust_num: 0 //新增企微客户数
  })
  const getTotleDataS = async (params: any) => {
    const res = await getTotleData(params)
    state.value = res
  }

  watch(
    () => props.params,
    async (val) => {
      await getTotleDataS(val)
    },
    { deep: true }
  )
</script>
<style scoped lang="scss">
  .content {
    .title {
      font-size: 18px;
      font-weight: bold;
      padding-bottom: 17px;
      margin-bottom: 24px;
      border-bottom: 1px solid #eaeaea;
    }
    .data {
      display: flex;
      justify-content: space-around;
      // width: 50%;
      .item {
        text-align: center;
        .myname {
          display: flex;
          padding-bottom: 16px;
        }
        .num {
          font-size: 46px;
          font-family: SFNSDisplay;
          color: #ff6b00;
        }
      }
    }
  }
  .desc {
    width: 412px;
    white-space: normal;
    word-break: break-all;
    word-wrap: break-word;
    width: 412px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #33302d;
    line-height: 20px;
  }
</style>
